<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>十大名画信息管理</title>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap">
		<script src="js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body {
				font-family: 'Noto Sans SC', sans-serif;
			}

			h2 {
				text-align: center;
				font-size: 30px;
			}

			.d1 {
				display: flex;
				justify-content: center;
				margin-top: 20px;
			}

			button {
				font-size: 18px;
			}

			table {
				width: 100%;
				border-collapse: collapse;
			}

			th,
			td {
				border: 1px solid #ddd;
				padding: 8px;
			}

			input {
				background-color: #D2B48C;
				color: white;
				font-size: 18px;
				width: 180px;
				text-align: center;
			}

			.i1 {
				width: 50px;
			}

			th {
				font-size: 20px;
				background-color: #f2f2f2;
				text-align: center;
			}

			.hidden {
				display: none;
			}

			.editable {
				background-color: #D2B48C;
			}
		</style>
	</head>
	<body>
		<h2>十大名画信息管理</h2>

		<table id="t1">
			<thead>
				<tr>
					<th>序号</th>
					<th>名字</th>
					<th>作者朝代</th>
					<th>作者姓名</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>

		<div class="d1">
			<button id="b1">增加</button>
		</div>
		<script>
			var paintings = [];
			
			//ajax请求json
			$(function() {
				$.ajax({
					url: 'data.json',
					dataType: 'json',
					success: function(data) {
						paintings = data;
						renderTable();
					},
					error: function() {
						alert('无法加载数据');
					}
				});
				
				//获取jsson存入表格中
				function renderTable() {
					var tbody = $('#t1 tbody');
					tbody.empty();
					paintings.forEach(function(painting, index) {
						var row = '<tr>' +
							'<td><input class="i1" type="text" value="' + painting.id + '" disabled></td>' +
							'<td><input type="text" value="' + painting.name + '" disabled></td>' +
							'<td><input type="text" value="' + painting.dynasty + '" disabled></td>' +
							'<td><input type="text" value="' + painting.author + '" disabled></td>' +
							'<td>' +
							'<button class="editButton">编辑</button>' +
							'<button class="deleteButton">删除</button>' +
							'<button class="saveButton hidden">保存</button>' +
							'<button class="cancelButton hidden">取消</button>' +
							'</td>' +
							'</tr>';
						tbody.append(row);
					});
				}
				
				//增加操作
				$('#b1').click(function() {
					var tbody = $('#t1 tbody');
					var newRow = '<tr>' +
						'<td><input class="i1" type="text"></td>' +
						'<td><input type="text"></td>' +
						'<td><input type="text"></td>' +
						'<td><input type="text"></td>' +
						'<td>' +
						'<button class="saveButton">保存</button>' +
						'<button class="cancelButton">取消</button>' +
						'</td>' +
						'</tr>';
					tbody.append(newRow);
					$('#b1').prop('disabled', true);
				});
				
				//编辑操作
				$('#t1').on('click', '.editButton', function() {
					$('#t1').find('.editButton, .deleteButton, .saveButton, .cancelButton').addClass(
						'hidden');

					var row = $(this).closest('tr');
					row.find('input').prop('disabled', false).addClass('editable');
					row.find('.editButton, .deleteButton').addClass('hidden');
					row.find('.saveButton, .cancelButton').removeClass('hidden');
				});
				
				//保存操作
				$('#t1').on('click', '.saveButton', function() {
					var row = $(this).closest('tr');
					var inputs = row.find('input');
					var newData = {};
					newData.id = inputs.eq(0).val();
					newData.name = inputs.eq(1).val();
					newData.dynasty = inputs.eq(2).val();
					newData.author = inputs.eq(3).val();

					if (!newData.id || !newData.name || !newData.dynasty || !newData.author) {
						alert('所有字段均需填写完整');
						return;
					}

					if (row.index() >= paintings.length) {
						paintings.push(newData);
					} else {
						paintings[row.index()] = newData;
					}

					renderTable();
					$('#b1').prop('disabled', false);
				});
				
				//取消操作
				$('#t1').on('click', '.cancelButton', function() {
					var confirmCancel = confirm('确定要取消吗？');
					if (confirmCancel) {
						if ($(this).closest('tr').index() >= paintings.length) {
							$(this).closest('tr').remove();
							$('#b1').prop('disabled', false);
						} else {
							renderTable();
						}
					}
				});
				
				//删除操作
				$('#t1').on('click', '.deleteButton', function() {
					var confirmDelete = confirm('确定要删除吗？');
					if (confirmDelete) {
						paintings.splice($(this).closest('tr').index(), 1);
						renderTable();
					}
				});
			});
		</script>

	</body>
</html>